<template>
  <div class="product-list-page">
    <div class="page-header">
      <!-- 分类展示总数量 -->
      <div class="go-flex">
        <h1>{{ totalProducts }} results found for "{{ route.query.keyword }}"</h1>
      </div>
    </div>
    <div class="page-content">

      <div class="page-content-right" v-if="Array.isArray(viewList) && viewList.length > 0">
        <!-- 排序方式 -->
        <!-- <div class="sort-section-gg">
          <a-select ref="select" v-model:value="sortValue" @change="handleSort" placeholder="input search text">
            <a-select-option v-for="item in sortOptions" :key="item.value" :value="item.value">{{ item.label
            }}</a-select-option>
          </a-select>
        </div> -->

        <!-- 商品列表 -->
        <div class="products-grid">
          <div v-for="item in viewList" :key="item.id" class="product-card">
            <a :href="`/product/${item.url}.html`" target="_self" :title="item.name">
              <div class="product-image" @mouseover="hoveredImage = item.id" @mouseleave="hoveredImage = null">
                <img :src="hoveredImage === item.id ? item.imgHover : item.img" :alt="item.name">
                <div class="label-row" v-if="isNewProduct(item.create_time) || item.discount_enabled == 1">
                  <!-- 标签  -->
                  <div class="new-label" v-if="isNewProduct(item.create_time)">
                    NEW
                  </div>
                  <!-- 折扣标签 -->
                  <div class="discount-label" v-if="item.discount_enabled == 1">
                    -{{ item.discount }}% OFF
                  </div>
                </div>
                <!-- 加入购物车按钮 -->
                <div v-if="hoveredImage === item.id" class="quick-view-button" @click.stop.prevent="addToCart(item)">
                  ADD TO CART
                </div>
                <div class="favourite-sty" v-if="hoveredImage === item.id">
                  <!-- 收藏按钮 -->
                  <img :src="SVG_ICONS.favourite_default" alt="Add to Wishlist" v-if="item.is_favorited == 0"
                    style="width: 20px;height: 20px;position: absolute;top: 20%;left: 20%;"
                    @click.stop.prevent="toggleFavorite(item)" />
                  <img :src="SVG_ICONS.favourite_active" alt="Remove from Wishlist" v-else
                    style="width: 20px;height: 20px;position: absolute;top: 20%;left: 20%;"
                    @click.stop.prevent="toggleFavorite(item)" />
                </div>
              </div>
              <div class="product-info">
                <div class="go-flex">
                  <h3>{{ item.name }}</h3>
                </div>
                <p class="price">{{ currencyStore.currentCurrency.unit }}{{ proxy.$ConvertPrice(item.min_price) }}
                  <span class="underline-sty">{{ currencyStore.currentCurrency.unit }}{{
                    proxy.$ConvertPrice(item.max_origin_price) }}</span>
                </p>
              </div>
              <!-- 选颜色按钮 -->
              <div class="color-selector go-flex" v-if="item.colors && item.colors.length">
                <template v-for="(color, index) in item.colors" :key="index">
                  <div class="img-border" @mouseover="activeColorFn(item, color.id)"
                    :class="color.id === item.color ? 'active' : ''">
                    <img :src="color.image" alt="Color" />
                  </div>
                </template>
              </div>
            </a>
          </div>

          <!-- 加载状态提示 -->
          <div v-if="loading" class="loading-indicator">
            <a-spin :indicator="indicator" />
          </div>

          <!-- 没有更多数据提示 -->
          <div v-if="!hasMore && viewList.length > 0" class="no-more-data">
            There are no more products available
          </div>

          <!-- 手动加载更多按钮（当自动加载失效时使用） -->
          <div v-if="hasMore && !loading && viewList.length > 0" class="load-more-btn">
            <a-button @click="manualLoadMore">Load more</a-button>
          </div>
        </div>

      </div>
      <div v-else class="no-data">No results found for "{{ route.query.keyword }}". Check the spelling or use a
        different word
        or phrase.
      </div>
    </div>
  </div>
  <a-modal v-model:open="open" width="1260px" title="Basic Modal" @ok="handleOk" :footer="null">
    <ProductDetail.default v-if="open && goodId" :goodId="goodId" @buy="handleBuy" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance, computed, onUnmounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { DownOutlined, UpOutlined, HeartOutlined } from '@ant-design/icons-vue';
import { addVisit, addFavorite, deleteFavorite, listFavorite, getSearchGoodsList } from '@/api/goods';
import { useCurrencyStore } from '@/store';
import { getToken } from '@/utils/auth';
import { useCartStore } from '@/store/cart';
import { LoadingOutlined } from '@ant-design/icons-vue';
import { h } from 'vue';
import { useUserStore } from '@/store/user';
import SVG_ICONS from "@/assets/SVG_ICONS.ts";
import * as ProductDetail from '@/components/ProductDetail.vue';
import { Item } from 'ant-design-vue/es/menu';
import mitt from '@/utils/mitt';
const { proxy } = getCurrentInstance()
const currencyStore = useCurrencyStore();
const cartStore = useCartStore()
const userStore = useUserStore()

const router = useRouter();
const route = useRoute()

// 加载样式
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '42px',
    color: '#000',
  },
  spin: true,
});
// hover 的图片 ID
const hoveredImage = ref<number | null>(null);
// 排序方式
const sortValue = ref('0')
const sortOptions = [
  {
    value: '0',
    label: 'Popular',
  },
  {
    value: '1',
    label: 'NEW',
  },
  {
    value: '2',
    label: 'Price low to high',
  },
  {
    value: '3',
    label: 'Price high to low',
  },
  {
    value: '4',
    label: 'Most Reviews',
  },
  {
    value: '5',
    label: 'Video',
  },
]
// 处理排序
const handleSort = (e: any) => {
  sortValue.value = e
  // 本地排序逻辑
  switch (e) {
    case '0': // Popular
      viewList.value.sort((a, b) => (b.visit || 0) - (a.visit || 0))
      break
    case '1': // NEW
      viewList.value.sort((a, b) => new Date(b.create_time) - new Date(a.create_time))
      break
    case '2': // Price low to high
      viewList.value.sort((a, b) => (a.min_price || 0) - (b.min_price || 0))
      break
    case '3': // Price high to low
      viewList.value.sort((a, b) => (b.min_price || 0) - (a.min_price || 0))
      break
    case '4': // Most Reviews
      viewList.value.sort((a, b) => (b.evaluate_count || 0) - (a.evaluate_count || 0))
      break
    case '5': // Video
      viewList.value.sort((a, b) => (a.visit || 0) - (b.visit || 0))
      break
  }
};
const open = ref<boolean>(false);
const goodId = ref(null);
// 添加到购物车
const addToCart = (item: any) => {
  try {
    open.value = true;
    goodId.value = item.id;
  } catch (error) {
    console.error('加入购物车失败:', error);
    message.error('加入购物车失败，请稍后重试');
  }
};
const handleOk = () => {
};

const handleBuy = () => {
};
// 分类展示总数量
const totalProducts = ref(0);
// 跳转商品详情页
const handleProductClick = (product: any) => {
  // window.location.href = `/product/${product.url}.html`
  // 使用 query 参数传递商品 ID
  router.push({
    path: '/details',
    query: { id: product.id }
  });
};

// 添加类型定义
interface Product {
  id: number;
  name: string;
  img: string;
  imgHover: string;
  is_favorited: number;
  min_price: number;
  colors?: Array<{
    id: string;
    image: string;
  }>;
  color?: string;
  visit?: number;
  create_time?: string;
  evaluate_count?: number;
}

// 修改 viewList 的类型
const viewList = ref<Product[]>([]);
const originalList = ref<Product[]>([]);

// 修改 activeColorFn 的参数类型
const activeColorFn = (product: Product, value: string) => {
  product.color = value;
};

// 判断是否登录
const isLogin = ref(!!getToken());

// 初始化
onMounted(() => {
  // 检测是否登录
  if (getToken()) {
    isLogin.value = true
    // getFavorite()
  }
  // 获取商品列表
  getProductListApi()
  // initProducts()

  // 监听窗口大小变化
  // window.addEventListener('resize', checkMobile)

  // 方法1: 使用传统滚动监听（作为备份）
  const handleScroll = () => {
    checkScroll();
  };
  window.addEventListener('scroll', handleScroll, { passive: true });

  // 方法2: 使用 IntersectionObserver（主要方法）
  const observer = setupInfiniteScroll();

  // 保存引用以便清理
  window.productListObserver = observer;
  window.scrollHandler = handleScroll;

  // 初始检查是否需要加载更多
  setTimeout(() => {
    if (document.documentElement.scrollHeight <= window.innerHeight && hasMore.value) {
      loadMoreProducts();
    }
  }, 500);

});
const pageSize = ref(24);
// 获取分类商品列表
const queryData = ref({
  page: 1,
  pageSize: pageSize,
  goods: route.query.keyword,
})


// 获取商品列表接口
const getProductListApi = async () => {
  loading.value = true;
  try {
    const res = await getSearchGoodsList(queryData.value);
    if (res.code === 200) {
      if (res.result.data && Array.isArray(res.result.data)) {
        // 处理图片数据
        res.result.data.forEach((good: any) => {
          good.img = good.images && good.images.length > 0 ? good.images[0] : '';
          if (good.images && good.images.length > 1) {
            const randomIndex = Math.floor(Math.random() * (good.images.length - 1)) + 1;
            good.imgHover = good.images[randomIndex];
          } else {
            good.imgHover = good.img;
          }
        });

        // 如果是第一页，直接设置数据
        if (queryData.value.page === 1) {
          viewList.value = res.result.data;
        } else {
          // 如果不是第一页，追加数据
          viewList.value = [...viewList.value, ...res.result.data];
        }
        totalProducts.value = res.result.total;
      } else {
        viewList.value = [];
        totalProducts.value = 0;
      }
    } else {
      viewList.value = [];
      totalProducts.value = 0;
    }
  } catch (error) {
    console.error('Failed to fetch products:', error);
    viewList.value = [];
    totalProducts.value = 0;
  } finally {
    loading.value = false;
    if (isLogin.value) {
      getFavorite(viewList.value);
    }
  }
}
watch(() => route.query.keyword, (newKeyword) => {
  if (newKeyword) {
    queryData.value.goods = newKeyword
    queryData.value.page = 1  // Reset page number when keyword changes
    viewList.value = []  // Clear existing results
    getProductListApi()
  }
}, { immediate: true })
// 是否收藏
const toggleFavorite = async (product: Product) => {
  if (!isLogin.value) {
    // 使用 userStore.logout 方法清除所有缓存
    userStore.logout();
    // 跳转到登录页面
    router.push({
      name: 'Login',
    });
    return;
  }

  if (product.is_favorited === 0) {
    const res = await addFavorite(product.id);
    if (res.code === 200) {
      product.is_favorited = 1;
    } else {
      product.is_favorited = 0;
    }
  } else {
    const res = await deleteFavorite(product.id);
    if (res.code === 200) {
      product.is_favorited = 0;
    } else {
      product.is_favorited = 1;
    }
  }
  getFavoriteApi()
};
// 获取收藏列表
const getFavorite = async (list: any) => {
  // 首先判断缓存里是否有收藏数据（有则拿缓存，无则从接口获取数据）
  if (cartStore.getCollect()) {
    const cachedData = cartStore.getCollect()

    if (!cachedData) return

    viewList.value = list.map((item: any) => {
      // 在缓存数据中查找对应商品
      const cachedItem = cachedData.find((cached: any) => cached.goods_id === item.id)
      return {
        ...item,
        is_favorited: cachedItem ? 1 : 0
      }
    })
  } else {
    await getFavoriteApi();
  }
}

// 获取收藏接口
const getFavoriteApi = async () => {
  await listFavorite().then((res) => {
    if (res.code === 200) {
      cartStore.setCollect(res.result.data)
    }
  })
}


// 分页相关变量
const currentPage = ref(1);
// const pageSize = ref(12);
const loading = ref(false);
const allProducts = ref([]);  // 存储所有商品数据

// 初始化加载第一页数据
const initProducts = async () => {
  loading.value = true;

  try {
    allProducts.value = [...viewList.value];
    // 加载第一页数据
    viewList.value = allProducts.value.slice(0, pageSize.value);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

// 检查滚动位置并加载更多商品
const checkScroll = () => {
  if (loading.value || !hasMore.value) return;

  // 获取滚动容器（可能是window或特定容器）
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = window.innerHeight || document.documentElement.clientHeight;

  // 计算距离底部的距离
  const distanceToBottom = scrollHeight - scrollTop - clientHeight;

  // 当距离底部500px时触发加载
  if (distanceToBottom < 500) {
    loadMoreProducts();
  }
};

// 使用 IntersectionObserver 实现无限滚动
const setupInfiniteScroll = () => {
  // 创建一个观察器实例
  const observer = new IntersectionObserver((entries) => {
    // 当观察的元素进入视口
    if (entries[0].isIntersecting && hasMore.value && !loading.value) {
      loadMoreProducts();
    }
  }, {
    rootMargin: '500px 0px' // 提前500px触发
  });

  // 创建并观察一个触发加载的元素
  setTimeout(() => {
    const loadTrigger = document.createElement('div');
    loadTrigger.id = 'load-more-trigger';
    loadTrigger.style.height = '10px';
    loadTrigger.style.width = '100%';
    loadTrigger.style.marginTop = '-10px';

    const productsGrid = document.querySelector('.products-grid');
    if (productsGrid) {
      productsGrid.appendChild(loadTrigger);
      observer.observe(loadTrigger);
    }
  }, 1000);

  return observer;
};

// 加载更多商品
const loadMoreProducts = async () => {
  if (loading.value || !hasMore.value) {
    console.log('跳过加载：', loading.value ? '正在加载中' : '没有更多数据');
    return;
  }

  loading.value = true;
  console.log('开始加载更多商品');

  try {
    // 增加页码
    queryData.value.page++;
    // 获取下一页数据
    await getProductListApi();
  } catch (error) {
    console.error('加载更多商品失败:', error);
  } finally {
    loading.value = false;
  }
};
// 手动触发加载更多（可以添加一个按钮调用此函数）
const manualLoadMore = () => {
  console.log('手动触发加载更多');
  loadMoreProducts();
};
// 判断是否还有更多数据
const hasMore = computed(() => {
  // 根据总商品数和当前显示的商品数判断是否还有更多
  return viewList.value.length < totalProducts.value;
});

onUnmounted(() => {
  // 移除滚动监听
  if (window.scrollHandler) {
    window.removeEventListener('scroll', window.scrollHandler);
  }

  // 清理 IntersectionObserver
  if (window.productListObserver) {
    window.productListObserver.disconnect();
  }

  // 移除触发元素
  const loadTrigger = document.getElementById('load-more-trigger');
  if (loadTrigger) {
    loadTrigger.remove();
  }
});

// 在 script setup 部分添加判断函数
const isNewProduct = (createTime: string | undefined) => {
  if (!createTime) return false;
  const createDate = new Date(createTime);
  const now = new Date();
  const diffTime = Math.abs(now.getTime() - createDate.getTime());
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  return diffDays <= 15;
};
</script>

<style lang="scss" scoped>
.go-flex-name {
  font-size: 14px;
  color: #232323;
}

.filter-header {
  width: 180px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 8px 12px;
  margin-bottom: 40px;
  font-size: 16px;
  position: relative;
  margin-right: 20px;
}

.filter-header1 {
  width: 180px;
  display: flex;
  align-items: center;
  border: none;
  padding: 0px 12px;
  margin-bottom: 20px;
  font-size: 16px;
  position: relative;
  margin-right: 20px;
}

.filter-icon {
  margin-right: 8px;
  color: #222;
}

.filter-title {
  flex: 1;
  font-weight: 500;
  color: #3D3D3D;
  font-size: 14px;
}

.filter-close {
  font-size: 22px;
  color: #888;
  cursor: pointer;
  margin-left: 8px;
}

.loading-indicator {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 0;
}

.no-more-data {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;
}

.load-more-btn {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 0;
}

.product-list-page {
  max-width: 1800px;
  margin: 0 auto;
  padding: 12px;
  width: 100%;
  margin-top: 100px;
}

.page-header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
  margin-top: 10px;

  h1 {
    // font-size: 12px;
    font-weight: 700;
    color: #232323;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  >div {
    flex: 1;
  }

  .open {
    display: none;
  }


}

.sort-section-gg {
  margin-bottom: 40px;


  >span {
    color: #000;
    font-size: 12px;
    margin-right: 12px;
  }

  .ant-select {
    // height: 37px;
    // line-height: 37px;
    width: 160px;
    border-radius: 1px;

    ::v-deep(.ant-select-selector) {
      border-radius: 0;
      // text-align: left;
      // font-size: 12px;
      // color: #eee;
    }
  }

  ::v-deep(.ant-select-selector) {
    height: 44px !important;
    line-height: 44px !important;
  }

  ::v-deep(:where(.css-dev-only-do-not-override-12unj27).ant-select-single .ant-select-selector .ant-select-selection-item, :where(.css-dev-only-do-not-override-12unj27).ant-select-single .ant-select-selector .ant-select-selection-placeholder) {
    padding: 0;
    line-height: 43px;
    transition: all 0.3s;
  }
}

.page-content-right {
  width: 100%;
  margin-top: 20px;
  // margin: 20px 60px;
}


.sort-section {
  flex: 1;
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 10px;

  span {
    color: #000000;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.12px;
  }

  select {
    padding: 8px;
    border: 1px solid rgb(97, 97, 97);
    background: white;
    font-size: 12px;
    width: 216px;
    border-radius: 2px;
  }
}

.page-content {
  display: flex;
}

.mobile-filter-btn {
  width: 200px;
  display: none;
  padding: 12px;
  background: black;
  color: white;
  border: none;
  margin-bottom: 20px;
  cursor: pointer;
}

.mobile-filter {
  display: none;
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1000;
  transition: left 0.3s ease;

  &.active {
    left: 0;
  }
}

.mobile-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #e8e8e8;
  font-weight: bold;

  button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
}

@media (max-width: 1300px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
  }
}

.product-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  cursor: pointer;
}

.product-image {
  position: relative;
  width: 100%;
  padding-bottom: 133.33%;
  /* 保持 3:4 比例 */
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  /* 图片加载前的背景色 */
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 60px;

  h3 {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 2px;
    color: #232323;
    // font-weight: bold;
    width: 98%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .price {
    font-size: 14px;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .underline-sty {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    font-weight: normal;
  }
}

.color-selector {
  margin-top: 10px;
  display: flex;
  gap: 4px;

  .img-border {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }

    &.active {
      border: 1px solid #000;
    }
  }
}

.label-row {
  display: flex;
  gap: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.new-label {
  // position: absolute;
  // top: 10px;
  // left: 10px;
  background-color: #AE8877;
  color: #FFFFFF;
  padding: 1px 8px;
  font-size: .75rem;
}

.discount-label {
  // position: absolute;
  // top: 10px;
  // left: 10px;
  background-color: #a8231c;
  color: #FFFFFF;
  padding: 1px 8px;
  font-size: .75rem;
}

.favourite-sty {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 10px;
  right: 10px;
  // padding: 1px 8px;
  background-color: #fff;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
}

.quick-view-button {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0px;
  // left: 50%;
  // transform: translateX(-50%);
  background-color: white;
  padding: 10px 0px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #000;
}

.quick-view-button:hover {
  background-color: #000;
  color: #FFFFFF;
}

.page-description {
  margin-bottom: 30px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: start;

  p {
    font-size: 14px;
    text-indent: 20px;
    line-height: 1.5;
    color: #000;
    margin: 0;
    // overflow: hidden;
    // display: -webkit-box;
    /* 将对象作为弹性伸缩盒子模型显示 */
    // -webkit-line-clamp: 2;
    /* 行数，值可以改，表示展示X行后多余的缩略展示 */
    // -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    // word-break: break-all;
  }

  .link {
    color: #000;
    text-decoration: underline;

    &:hover {
      color: #666;
    }
  }

  .read-more {
    background: none;
    border: none;
    color: #000;
    font-size: 14px;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    width: 145px;
    font-weight: bolder;

    &:hover {
      color: #666;
    }
  }
}

::v-deep(.hot-image-title) {
  display: block;
  padding-right: 7px;
}

@media (max-width: 768px) {
  .page-header {
    // flex-direction: column;
    // align-items: flex-start;
    // gap: 15px;
    display: flex;

    h1 {
      width: 100%;
      text-align: center;
    }

    // .sort-section-gg {
    //   display: none;
    // }

    .kong {
      display: none;
    }

    .open {
      display: block;
    }
  }

  // .page-content {
  //   grid-template-columns: 1fr;
  // }

  .desktop-filter {
    display: none;

  }

  .mobile-filter-btn,
  .mobile-filter {
    display: block;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-card {
    .product-info {
      h3 {
        font-size: 12px;
      }

      .price {
        font-size: 12px;
      }
    }
  }

  .page-description {
    text-align: center;
    width: 100%;

    .read-more {
      display: none;
    }

  }

}

@media (max-width: 510px) {
  .page-header {
    // flex-direction: column;
    // align-items: flex-start;
    // gap: 15px;
    display: flex;

    h1 {
      width: 100%;
      text-align: center;
    }

    // .sort-section-gg {
    //   display: none;
    // }

    .kong {
      display: none;
    }

    .open {
      display: block;
    }
  }

  // .page-content {
  //   grid-template-columns: 1fr;
  // }

  .desktop-filter {
    display: none;

  }

  .mobile-filter-btn,
  .mobile-filter {
    display: block;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .product-card {
    .product-info {
      h3 {
        font-size: 12px;
      }

      .price {
        font-size: 12px;
      }
    }
  }

  .page-description {
    text-align: center;
    width: 100%;

    .read-more {
      display: none;
    }

  }
}

@media (max-width: 363px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

.hot-top-image {
  width: 100%;
}

.no-data {
  width: 100%;
  text-align: center;
  padding: 30px 0px 80px 0;
}
</style>